<script setup>

import {Check, List, Setting, User} from "@element-plus/icons-vue";
import router from "../router/index.js";
</script>

<template>
  <el-aside class="System" width="200px">
    <el-header>教师信息管理系统</el-header>
   
      <el-scrollbar max-height="800px">
        <el-menu :defalut-openeds="['1','3']">

          <el-sub-menu class="sub-menu1" index="2">
            <template #title>
              <el-icon ><List/></el-icon>授课申请
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="router.push({name:'tea_submitc'})">提交授课申请</el-menu-item>
              <el-menu-item index="2-2" @click="router.push({name:'tea_clist'})">查看所授课程</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu  class="sub-menu2" index="3">
            <template #title>
              <el-icon><Check /></el-icon>批改成绩
            </template>
            <el-menu-item-group @click="router.push({name:'tea_grade'})">
              <el-menu-item index="3-1">批改学生成绩</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu  class="sub-menu3" index="4">
            <template #title>
              <el-icon><User /></el-icon>个人中心
            </template>
            <el-menu-item-group @click="router.push({name:'tea_personal'})">
              <el-menu-item index="3-1">更改个人信息</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu class="sub-menu4" index="5">
            <template #title>
              <el-icon><Setting /></el-icon>系统界面设置
            </template>
            <el-menu-item-group @click="router.push({name:'tea_setting'})">
              <el-menu-item index="4-1">更改主题</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    
    <!-- 列表 -->

  </el-aside>
</template>

<style >
.System {
  position: fixed;
  top: 100px;
  left: 15px;
  height: 90%;
  border-radius: 15px;
  background-color: rgb(164, 204, 228);
  font-size: larger;
  .el-header {
    background-color: #abc4e5;
    font-weight: 500;
    color: #000000;
    line-height: 60px;
  }
  .sub-menu1{
    background-color: rgb(213, 230, 239);
  }
  .sub-menu2{
    background-color: rgb(213, 230, 239);
  }
  .sub-menu3{
    background-color: rgb(213, 230, 239);
  }
  .sub-menu4{
    background-color: rgb(213, 230, 239);
  }
}
</style>